<script setup name="supplier">
import { ref, reactive, getCurrentInstance, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { GetViewAPI, GetDetailListAPI } from '@/api/order/subcontracting/order'
const route = useRoute()
const router = useRouter()
const tabs = ref('单据明细')
// 列表
const TableData = ref([])

// 列表总数量
const total = ref(0)

// 列表加载
const loading = ref(false)

// 查询条件
const query = reactive({
  id: '',
  pageNum: 1,
  pageSize: 10
})

const handleSelectionChange = () => {}

const getListDetail = async () => {
  TableData.value = []
  try {
    query.id = route.query.id
    loading.value = true
    const res = await GetDetailListAPI(query)
    total.value = res.total
    TableData.value = res.rows
  } catch {
  } finally {
    loading.value = false
  }
}

getListDetail()
</script>

<template>
  <div class="app-container">
    <el-button type="inof" @click="router.push('/order/subcontracting/order')">返回</el-button>
    <el-table
      class="tableClass"
      v-loading="loading"
      stripe
      border
      :data="TableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="序号" width="70" type="index" />
      <el-table-column label="类别" prop="materialTypeDict" width="150" />
      <el-table-column label="物料名称" prop="materialName" width="150" />
      <el-table-column label="物料编码" prop="materialCode" width="150" />
      <el-table-column label="物料规格" prop="materialSpec" width="150" />
      <el-table-column label="物料类别" prop="materialCategoryDict" width="150" />
      <el-table-column label="单位" prop="materialUnitDict" width="120" />
      <el-table-column label="占比" prop="bomDetailDosage" width="auto" />
      <el-table-column label="需求量 " prop="warehouseWeight" width="auto" />
      <el-table-column label="已出库量" prop="outWeight" width="auto" />
      <!-- <el-table-column label="单位" prop="materialUnitDict" width="auto" /> -->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="query.pageNum"
      v-model:limit="query.pageSize"
      @pagination="getListDetail"
    />
  </div>
</template>
